<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('电池箱列表')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <select id ="queryDevice"class="selectpicker" data-live-search="true">
                        <option data-tokens="ketchup mustard">查询设备</option>
                    </select>
                    <ul>
                        <li>
                            电池包编码:<input type="text" name="baoCoding"/>
                        </li>
                        <li>
                            电池包型号名称：
                            <input type="text" name="baoModelName"/>
                        </li>
                        <li>
                            电池包型号编号：
                            <input type="text" name="baoModelId"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:pack:add">
                <i class="fa fa-plus"></i> 添加
            </a>
            <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="system:pack:edit">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:pack:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:pack:export">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<div class="container">

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="packinformation" tabindex="-1" role="dialog" aria-labelledby="packinformationLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="packinformationLabel">
                        电池箱参数详细参数
                    </h4>
                </div>
                <form class="form-horizontal m" id="form-information-edit" >
                    <input name="id"  type="hidden">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">外形：</label>
                        <div class="col-sm-8">
                            <input id="outtine" class="form-control" type="text" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">尺寸(mm)：</label>
                        <div class="col-sm-8">
                            <input id="measure"  class="form-control" type="text" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">额定容量(Ah)：</label>
                        <div class="col-sm-8">
                            <input id="ratedApacity"  class="form-control" type="text" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">标称电压(V)：</label>
                        <div class="col-sm-8">
                            <input id="rateVoltage"  class="form-control" type="text" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">额定质量(kg)：</label>
                        <div class="col-sm-8">
                            <input id="rateQuality"  class="form-control" type="text" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">能量密度(Wh/kg)：</label>
                        <div class="col-sm-8">
                            <input id="energyDensity"  class="form-control" type="text" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">功率密度(W/kg)：</label>
                        <div class="col-sm-8">
                            <input id="powerDensity" class="form-control" type="text" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">充电倍率(C)：</label>
                        <div class="col-sm-8">
                            <input id="rechargeRate" class="form-control" type="text" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">电池寿命(年)：</label>
                        <div class="col-sm-8">
                            <input id="batteryLife" class="form-control" type="text" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">温度探针总数：</label>
                        <div class="col-sm-8">
                            <input id="temperatureProbe" class="form-control" type="text" disabled>
                        </div>
                    </div>
<!--                    <div class="form-group">-->
<!--                        <label class="col-sm-3 control-label">json关联电池模组：</label>-->
<!--                        <div class="col-sm-8">-->
<!--                            <input id="cellModelId" class="form-control" type="text" disabled>-->
<!--                        </div>-->
<!--                    </div>-->
                </form>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="container">
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="batterymodel" tabindex="-1" role="dialog" aria-labelledby="batterymodelLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="batterymodelLabel">
                            电池箱模块参数详情
                        </h4>
                    </div>
                    <form class="form-horizontal m" id="form-modelProperty-edit">
                        <input id="propertyId" type="hidden">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">模块编码：</label>
                            <div class="col-sm-8">
                                <input id="propertyCode" class="form-control" type="text" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">外形：</label>
                            <div class="col-sm-8">
                                <input id="propertyShape"  class="form-control" type="text" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">尺寸(mm)：</label>
                            <div class="col-sm-8">
                                <input id="propertySize" class="form-control" type="text" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">额定容量(AH)：</label>
                            <div class="col-sm-8">
                                <input id="propertyCapacity" class="form-control" type="text" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">标称电压(V)：</label>
                            <div class="col-sm-8">
                                <input id="propertyVoltage" class="form-control" type="text" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">额定质量(KG)：</label>
                            <div class="col-sm-8">
                                <input id="propertyQuality" class="form-control" type="text" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">能量密度(Wh/kg)：</label>
                            <div class="col-sm-8">
                                <input id="propertyDensity" class="form-control" type="text" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">充电倍率(C)：</label>
                            <div class="col-sm-8">
                                <input id="propertyRate" class="form-control" type="text" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">电池寿命(年)：</label>
                            <div class="col-sm-8">
                                <input id="propertyLifetime" class="form-control" type="text" disabled>
                            </div>
                        </div>
<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-3 control-label">单体电池编号(JSON字符串)存储单体电池信息：</label>-->
<!--                            <div class="col-sm-8">-->
<!--                                <input id="propertyCellInformation" class="form-control" type="text">-->
<!--                            </div>-->
<!--                        </div>-->
                    </form>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

</div>
    <th:block th:include="include :: footer" />
<script th:inline="javascript">

    window.onload=function(){
        $('body').on('hidden', '.modal', function () {
            $(this).removeData('modal');
        });

    }
    window.operateEvents = {
        'click #c2': function (e, value, row, index) {
            $.ajax({
                url:"/pack/information/findone/"+value,
                type:"get",
                dataType:"json",
                success:function (d) {
                    console.log(d);
                    $("#outtine").val(d.outtine);
                    $("#measure").val(d.measure);
                    $("#ratedApacity").val(d.ratedApacity);
                    $("#rateVoltage").val(d.rateVoltage);
                    $("#rateQuality").val(d.rateQuality);
                    $("#energyDensity").val(d.energyDensity);
                    $("#powerDensity").val(d.powerDensity);
                    $("#rechargeRate").val(d.rechargeRate);
                    $("#batteryLife").val(d.batteryLife);
                    $("#temperatureProbe").val(d.temperatureProbe);
                    // $("#cellModelId").val(d.cellModelId);
                }
            })
        }, 'click #c1': function (e, value, row, index) {
            var a=value.substring(0,1);
            $.ajax({
                url:"/modelProperty/modelProperty/findOne/"+a,
                type:"get",
                dataType:"json",
                success:function (d) {
                    console.log(d);
                    $("#propertyCode").val(d.propertyCode);
                    $("#propertyShape").val(d.propertyShape);
                    $("#propertySize").val(d.propertySize);
                    $("#propertyCapacity").val(d.propertyCapacity);
                    $("#propertyVoltage").val(d.propertyVoltage);
                    $("#propertyQuality").val(d.propertyQuality);
                    $("#propertyDensity").val(d.propertyDensity);
                    $("#propertyRate").val(d.propertyRate);
                    $("#propertyLifetime").val(d.propertyLifetime);
                    // $("#propertyCellInformation").val(d.propertyCellInformation);
                }
            })
        }

    };
</script>


<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('part:pack:edit')}]];
    var removeFlag = [[${@permission.hasPermi('part:pack:remove')}]];
    var prefix = ctx + "part/batterypack";

    $(function() {

        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "电池箱",
            columns: [{
                checkbox: true
            },
                {
                    field : 'id',
                    title : '主键',
                    visible: false
                },
                {
                    field : 'baoCoding',
                    title : '电池包编码',
                },
                {
                    field : 'baoModelName',
                    title : '电池包型号名称'
                },
                {
                    field : 'baoModelId',
                    title : '电池包型号编号'
                },
                {
                    field : 'baoCapacity',
                    title : '实际容量'
                },
                {
                    field : 'baoTensioin',
                    title : '实际电压(V)'
                },
                {
                    field : 'baoQuality',
                    title : '实际质量(kg)'
                },
                {
                    field : 'leaveFactoryTime',
                    title : '出厂时间'
                },
                {
                    field : 'vin',
                    title : '所在车辆VIN'
                },
                {
                    field : 'daoSpecification',
                    title : '电池包规格代码'
                },
                {
                    field : 'batteryBrand',
                    title : '电池品牌'
                },
                {
                    field : 'moduleUntieWay',
                    title : '模块串并联方式'
                },
                {
                    field : 'moduleNums',
                    title : '模块个数'
                },
                {
                    field : 'manufacturerName',
                    title : '生产厂商名称'
                },
                {
                    field : 'moduleIds',
                    title : '电池包型号模块参数',
                    events: operateEvents,
                    formatter:function (value,row,index) {
                        return [
                            '<a data-toggle="modal" id="c1" data-target="#batterymodel">查看详细信息</a>'
                        ].join('');

                    }
                },
                {
                    field : 'argumentId',
                    title : '电池包型号性能参数',
                    events: operateEvents,
                    formatter:function (value,row,index) {
                        return [
                            '<a data-toggle="modal" id="c2" data-target="#packinformation">查看详细信息</a>'
                        ].join('');

                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        };

        $.table.init(options);
    });
</script>
</body>
</html>
